<template>
    <div>
    <!-- <div class="content"> 
     <div class="buttons">
       <el-button @click="handButton($event)">添加</el-button>
       <el-button @click="handButton($event)">修改</el-button>
       <el-button @click="handButton($event)">删除</el-button>
     </div>
   </div> -->


   <el-table
     
       :data="tableData"
       :row-style="{height: '60px'}"
       stripe
       style="width: 100%"
       @selection-change="handleSelectionChange"
     >

       <el-table-column
         type="selection"
         width="55px"
         fixed="left"
       >
     </el-table-column>

       <el-table-column
         label="序号"
         type="index"
       >
         <template scope="scope">
           <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
         </template>
       </el-table-column>

       <el-table-column
         v-for="(item,index) in title"
         :key="index"
         :prop="item.prop"
         :label="item.label"
       >

         <!-- 提示 -->
         <template slot-scope="scope">
           <el-tooltip
             class="item"
             :disabled="tooltipDisabled"
             effect="dark"
             placement="top-start"
           >
             <div
               class="tableTooltip"
               @mouseenter="spanMouseenter($event)"
             >{{ scope.row[item.prop] }}</div>
             <div
               slot="content"
               style="max-width: 200px;"
             >{{ scope.row[item.prop] }}</div>
           </el-tooltip>
         </template>

       </el-table-column>

     </el-table>
     <div class="page">
     <el-pagination
       :current-page="currentPage"
       :page-sizes="[10, 20, 50, 100,200]"
       :page-size="pageSize"
       layout="total, sizes, prev, pager, next, jumper"
       :total="total"
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
     />
   </div>

   <div>

 </div>



    </div>
 
</template>

<script>
import {getOrder} from "@/api/dataReq"
export default {
 name: 'merorder',
 // components: {},
 // props:{
 //     names:{
 //         type:Array,
 //         default:()=>{return []}
 //     }
 // },
     

 data() {
   return {
     title: [
     { prop: 'uid', label: '订单号' },
     { prop: 'goods_name', label: '商品名字' },
     { prop: 'createtime', label: '下单时间' },
     { prop: 'price', label: '单价' },
     { prop: 'number', label: '数量' },
     { prop: 'total', label: '总价格' },
     { prop: 'isrush', label: '抢购' },
     
    
   ],
   tableData: [],
   currentPage: 1, // 当前页数
   pageSize: 10, // 每页多少行
   total: 10, // 总页数
   multipleSelection: [], // 选中的
   imgShow: '',
   tooltipDisabled: true, // 控制tooltip显示
   loading: true,
   dialogVisible:false
   }
 },
 computed: {},
 created() {
    this.getData()
 },
 methods: {

    getData(){
        var reqData  ={
        page_size: this.pageSize,
        page_num: this.currentPage,
      }
        getOrder(reqData).then(response => {
          if (response.code == '1') {
            // console.log(response)
            // console.log(typeof(response.data[0]))
           this.tableData = this.parseData(response.data)

          } else {
            
          }
        }).catch(error => {
          console.log('err', error)
          
        })
    },
    parseData(data){
        data.forEach((item) => {
              item.isrush = item.isrush == '0' ? '否' : '是'
              
            })
        
        return data
      },


handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.getData()
    },
handleCurrentChange(val) {
    // console.log(`当前页: ${val}`);
    this.currentPage = val
    this.getData()
},
handleClick(){

},
handleClose(){

},
handleSelectionChange(){

},
spanMouseenter(ev) {
if (ev.target.clientWidth < ev.target.scrollWidth) {
this.tooltipDisabled = false
} else {
this.tooltipDisabled = true
}
},


 }
}
</script>
<style lang="scss" scoped>
.page{
 display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
::v-deep {
  .tableTooltip {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
